تقنيات CSS - الجزء الثاني

CSS لغة بسيطة جدا يمكن استيعابها وتعلمها بسرعة، واستخدامها ببراعة يجعل تصميم المواقع أكثر سهولة ومتعة.
بعد الجزء الأول من تقنيات CSS والذي حقق نسبة غير متوقعة في عدد الزيارات، إليكم التتمة في الجزء الثاني وأعتذر عن الغياب الطويل لأسباب شخصية سأوضحها فيما بعد.

المدون

عصام محيمي

تاريخ النشر

2 يناير 2016

التصنيف

البرمجة والتصميم

4إخفاء العناصر من صفحة الويب

نحتاج أحيانا لإخفاء بعض العناصر (عنوان، رابط، صورة ...) باستخدام لغة CSS، إما بغرض التخلص منها أو لإظهارها بعد حدث معين (Click مثلا). وأبرز الطرق لعمل ذلك :

خاصية display :
لنعتبر الرابط التالي ذو كلاس problogger :

<a class="problogger" href="http://www.th3problogger.com">محترف بلوجر
</a>

إذن لإخفاء هذا الرابط سأستعمل الخاصية الأكثر شيوعا display:none كما يلي :

 .problogger
 {
     display: none; 
 }

وتعني عدم إظهار العنصر -أو الوسم- ذو الكلاس problogger

خاصية opacity :
تتحكم خاصية opacity في شفافية العنصر كما هو الحال في برنامج الفوتوشوب وغيره من برامج تحرير الصور. ففي لغة CSS تأخذ قيمة بين 0 و 1 وبالتالي فالقيمة 0 تعني إخفاء العنصر.
- تطبيق :
سأقوم باستدعاء صورة ثلاث مرات وفي كل حالة سأعطيها قيمة مختلفة في خاصية opacity :

 <img src="blogger.png" style="opacity: 1" />
 <img src="blogger.png" style="opacity: 0.5" />
 <img src="blogger.png" style="opacity: 0" />

- النتيجة :

كما تلاحظ، في الحالة الثالثة لم تظهر الصورة لأن قيمة الشفافية منعدمة.

خاصية position :
سبق وأن استعصى علي الأمر لإخفاء رابط من القالب الأصلي لمدونة محترف بلوجر فلم تنجح معي الطرق السابقة وكانت خاصية position:absolute الحل الأمثل، فهي مسؤولة عن تموضع العنصر ويمكن استخدامها لإرساله بعيدا عن حدود الشاشة. لاحظ معي التطبيق التالي وستفهم جيدا هذه الخاصية.
- تطبيق :
لنعتبر نفس الرابط الأول ذو الكلاس problogger

<a class="problogger" href="http://www.th3problogger.com">محترف بلوجر
</a>

باستخدام لغة CSS سأقوم هذه المرة بتغيير موضع الرابط إلى 9999px على اليسار بالنسبة للصفحة (أو بالنسبة لعنصر أم ذو خاصية position:relative) وبالتالي سيصبح خارج حدود الشاشة.

 .problogger
 {
     position: absolute;
     left: 9999px;
 }

5تكبير الصور بعد تمرير الماوس (الزوم)

تقنية الزوم ليست جاهزة في لغة CSS لكن يمكن إنشائها باستخدام خاصيتين أساسيتين وهما ()transform:scale المسؤولة عن تكبير العنصر (صورة مثلا) و overflow:hidden التي تلعب دور الماسك يعني إخفاء جزء الصورة الخارج عن مساحتها بعد تكبيرها. الطريقة سهلة جدا ولا تحتاج أكواد كثيرة فقط ركز معي في التطبيق.
- تطبيق :
سأقوم أولا بإنشاء مساحة ذات كلاس zoom باستخدام الوسم <div> كما يلي :

<div class="zoom">

</div>

وسأطبق عليها الخصائص التالية (طول = 200px، عرض = 150px، إطار أسود بسمك 1px وخاصية الماسك)

 .zoom
 {
     width: 200px;
     height: 150px;
     border: 1px solid #000;
     overflow: hidden;
 }

بعد ذلك سأضيف صورة بداخل الوسم <div> ليصبح كود HTML كالتالي :

 <div class="zoom">
   <img src="css3.png"/>
 </div>

ثم سأطبق عليها نفس طول وعرض المساحة الأم إضافة إلى الخصائص التي ستحدث عند تمرير الماوس (hover) :

 .zoom img
 {
     width: 200px;
     height: 150px;
     transition: all 0.5s ease-in-out 0s;
 }

 .zoom img:hover
 {
     transform: scale(2);
     transition: all 0.5s ease-in-out 0s;
 }

- السطر (8) يعني تطبيق الخصائص على الصور الموجودة داخل الوسم ذو الكلاس zoom عند تمرير الماوس عليها.
- الأسطر (10) و (11) تعني تكبير الصورة مرتين في ظرف خمس أجزاء من الثانية.
- النتيجة :

6توسيط الكتابة عموديا باستخدام line-height

تستعمل خاصية line-height للتحكم في المسافة بين سطور النص، ويمكن استخدامها لتوسيط الكتابة عموديا في مساحة بأبعاد معينة (يشترط أن يكون عنوان أو سطر واحد).
- تطبيق :
مثلا أريد كتابة عنوان (ليكن محترف بلوجر) وسط مساحة ذات كلاس problogger بطول 300px وعرض 80px، إذن فكود HTML سيكون على الشكل التالي :

 <div class="problogger">محترف بلوجر</div>

الخاصية المسؤولة عن توسيط الكتابة أفقيا هي text-align:center. ولتوسيط الكتابة عموديا سأستعمل خاصية line-height وأعطيها نفس قيمة العرض (80px) كما يلي :

 .problogger
 {
     width: 300px;
     height: 80px;
     text-align:center;
     line-height: 80px;
     background: #3A4755;
     color: #fff;
     font-size: 23px;
     border-radius: 5px;
     
 }

- الأسطر (7)، (8) و (9) تعني خلفية بلون رمادي مغموق وخط أبيض بحجم 23px.

ماذا عن خاصية vertical-align:middle ؟

خاصية vertical-align:middle تعمل فعلا على توسيط الكتابة عموديا لكنها شغالة فقط على الجداول والتي أصبحت أقل أهمية في الوقت الحالي خاصة مع ظهور إطار العمل Bootstrap.

- النتيجة :

محترف بلوجر

تابع القراءة

كل ما يجب أن تعرفه لإنشاء موقع ناجح

إذا كنت تطمح لإنشاء موقع إلكتروني ناجح بمعايير إحترافية، فاعلم أن التخطيط والإعداد المسبق هما الأساس.
في هذه التدوينة الحصرية على محترف بلوجر سأشارك معك عزيزي القارئ أبرز الأشياء التي يجب أن تعرفها لإنشاء موقع ناجح على شبكة الأنترنت.

المدون

عصام محيمي

تاريخ النشر

12 دجنبر 2014

التصنيف

البرمجة والتصميم

1إسم النطاق

اختر بعناية إسم نطاق (مناسب) لموقعك بحث يسهل تذكره من طرف الزوار.

2الإستضافة

اختر استضافة موثوقة كـ (Godaddy، Heberjahiz، Genious) على سبيل المثال مع النظر إلى مساحة التخزين التي ستحتاجها لإستضافة موقعك.

3التقنيات

قبل الشروع في إنشاء موقعك يجب أولا تحديد لغات البرمجة التي ستستعملها كـ (PHP، Asp.net) أو أنظمة إدارة المحتوى كـ (Joomla، Wordpress).

4الهدف

حدد الهدف أو الغرض من إنشاء الموقع : موقع ربحي، موقع للأعمال التجارية، موقع لشركة، موقع لبيع منتجات ...

5التخطيط (Layout) والألوان

ألوان الموقع يجب أن تكون متناسبة مع مجاله (مثلا : اللون الأخضر للمواقع الرياضية و البرتقالي للمواقع السياحية)، والتخطيط الأنيق يجعل جميع العناصر واضحة للزائر.

6خريطة الموقع

حدد جميع صفحات موقعك والصفحات الفرعية لتقديم لمحة عامة عن محتوى الموقع.

7الفئة المستهدفة

عليك أن تعرف نوع الزوار الذين تستهدفهم ثم بعد ذلك يمكنك إعداد المحتوى الذي سيجذبهم.

8المحتوى

احرص على توفير محتوى جيد ومفيد لزوار موقعك يتضمن كلمات مفتاحية تحتل مراتب متقدمة في محركات البحث.

9الإعلانات

لا تخصص الكثير من المساحات الإعلانية، فإذا لم تكن ضرورية من الأفضل عدم وضعها في الموقع.

10النوافذ المنبثقة

تجنب النوافذ المنبثقة في موقعك، فهذا النوع من الإعلانات يزعج الزوار ويسبب بطء في تحميل الموقع وأحيانا لا يمكن إغلاقها.

11تصميم جذاب

تصميم الموقع الجيد يتميز بالبساطة والإحترافية.

12الأزرار

إجعل الأزرار كـ (إشترك الآن، شراء الآن، تحميل ...) تلفت أنظار الزوار، ومن الأفضل إستخدام الألوان الزاهية مثل البرتقالي أو الأصفر.

13خلفية الموقع

يمكنك إختيار إما خلفية بلون واحد أو خلفية ملونة أو يمكنك إختيار خلفية منقوشة.

14الصور

اختر صور ذات جودة عالية والتي ستخلق إنطباعا لدى الزوار.

15سهولة التصفح

الزائر بجب أن يجد بسهولة ما يبحث عنه.

16التميز

هناك الكثير من المواقع الجيدة، لكن يجب أن تجعل موقعك يتميز عن الآخرين.

17التحديث

التحديث المستمر لمحتوى الموقع يضمن عودة الزوار والحفاظ عليهم.

18التهيئة لمحركات البحث

الموقع الجيد يجب أن يكون صديقا لمحركات البحث، يعني يسهل العثور عليه في محركات البحث.

19التوافق مع معظم المتصفحات

الموقع الجيد يجب أن يعرض بشكل صحيح في جميع المتصفحات الحديثة كـ (Opera، Safari، Mozilla Firefox، Google Chrome)

20التوافق مع جميع الأجهزة

موقعك يجب أن يكون متجاوبا مع جميع الأجهزة المختلفة الأحجام. فقد أحدثت الهواتف الذكية و الأجهزة اللوحية ثورة كبيرة واختلفت أحجام الشاشات من كبيرة إلى صغيرة و هنا يقع على عاتق مصمم المواقع توفير تصميم مناسب لكل الجمهور بإختلاف الأجهزة التي يتصفحون بها الموقع.

21الشبكات الإجتماعية

دمج الشبكات الإجتماعية مع موقعك أمر مهم للحصول على الزوار و لتسهيل نشر المحتوى.

22خط الكتابة

اختر خطا مقروءا، فنوع الخط بالتأكيد مهم جدا. فلا يجب على الزائر أن يجد صعوبة في قراءة المحتوى.

23تسجيل الدخول

إذا وجب على الزوار تسجيل الدخول والإشتراك في موقعك، إمنحهم بعض المزايا عندما يفعلون ذلك.

24تتبع وتحليل إحصائيات الزوار

وذلك لمراقبة كيف ينمو موقعك والعمل على تحسينه.

25توفير الأمن للزوار

الزائر يجب أن يشعر بالأمان عند إدخال معلومات خاصة به في موقعك، خاصة معلومات الإتصال ورقم بطاقة الإئئتمان.

26الفوتر (Footer)

الفوتر قد لا يكون الشيء الرئيسي في الموقع، لكن مع فوتر مصمم بشكل جيد يحتوي على أهم الروابط وأيقونات الشبكات الإجتماعية يمكنك إقناع زوار موقعك.

المصدر

26 Things to note before you develop a website

تابع القراءة

تقنيات CSS - الجزء الأول

لغة CSS أصبحت أكثر أهمية في مجال تصميم المواقع خاصة مع ظهور الإصدار الثالث (CSS3) في سنة 2003 مما أدى إلى التقليل من إستعمال الفلاش والصور.

اليوم سأشارك معكم بعض التقنيات الهامة في لغة CSS والتي إكتسبتها من خلال تجربتي الشخصية.

المدون

عصام محيمي

تاريخ النشر

12 ديسمبر 2013

التصنيف

البرمجة والتصميم

1صور دائرية باستخدام border-radius :

خاصية border-radius تمكنك من إضافة حواف دائرية على عناصر الصفحة كالصور مثلا، ويمكن استغلال هذه الخاصية لإنشاء صور دائرية وذلك بإعطائها القيمة %50.
- تطبيق :
في هذا التطبيق سأقوم بإستدعاء مجموعة من الصور (الطول = العرض)، كل صورة سأعطيها قيمة مختلفة في خاصية border-radius حتى تتضح لك الفكرة :

- النتيجة :

2أيقونات بجانب العناوين

باستخدام بعض الخصائص في لغة CSS يمكنك إنشاء عناوين بجانبها أيقونات بكل سهولة وإحترافية، فقط ركز معي في التطبيق.
- تطبيق :
مثلا أريد إضافة أيقونة بلوجر بجانب العنوان التالي :

 
محترف بلوجر

الحل الأمثل والأذكى هو إزاحة العنوان قليلا نحو اليسار ثم إعطائه الأيقونة كخلفية على اليمين بدون تكرار كما يلي :

 h3
 {
     padding-right: 40px;
     background-image: url(blogger.png);
     background-position: right center;
     background-repeat: no-repeat;  
 }

- النتيجة :

3الأزرار

يمكنك إنشاء رابط على شكل زر باستخدام لغة CSS دون الحاجة إلى الصور، والتطبيق التالي سيوضح ذلك.
- تطبيق :
نعتبر الرابط التالي على سبيل المثال :

 محترف بلوجر

الخاصيات المسؤولة عن تصميم الزر هي padding و background، وللمزيد من الجمالية سأستعمل خاصية border-radius لإضافة الحواف الدائرية كما يلي :

 a
 {
     padding: 10px;
     background: #3A4755;
     border-radius: 5px;
     text-decoration: none;
 }

- النتيجة :

أرجو أن أكون قد أفدتكم بهذه التقنيات التي إكتسبتها من خلال تجربتي الشخصية في مجال تصميم المواقع وأعدكم بما هو أروع في مواضيع قادمة إن شاء الله حصريا على مدونة محترف بلوجر.

تابع القراءة